<template>
  <div>
    <el-steps
      :active="active"
      align-center
      finish-status="success"
    >
      <el-step
        title="提交审核"
        description=""
      >
      </el-step>
      <el-step title="商家审核">
        <div slot="description">
          <el-button
            @click="step1"
            v-if="active==1"
          >审核</el-button>
        </div>
      </el-step>
      <el-step
        title="已审核"
        description=""
      >
      </el-step>
      <el-step
        title="商家发货"
        description=""
      >
        <div slot="description">
          <el-button
            @click="step3"
            v-if="active==3"
          >发货</el-button>
        </div>
      </el-step>
      <el-step
        title="完成"
        description=""
      >
      </el-step>
      <template v-if="shenHe == 1">
        <el-step title="审核通过" :icon="active>2?'el-icon-star-on':'el-icon-star-off'"/>
        <el-step title="买家发货" :icon="active>3?'el-icon-star-on':'el-icon-star-off'"/>
        <el-step title="商家收货" :icon="active>4?'el-icon-star-on':'el-icon-star-off'">
          <div slot="description">
            <el-button
              @click="step5"
              v-if="active==4">收货</el-button>
          </div>
        </el-step>
        <el-step
          title="商家退款" :icon="active>5?'el-icon-star-on':'el-icon-star-off'">
          <div slot="description">
            <el-button
              @click="step5"
              v-if="active==5">退款</el-button>
          </div>
        </el-step>
        <el-step title="完成" :icon="active>6?'el-icon-star-on':'el-icon-star-off'"/>
      </template>
      <template v-if="shenHe == 2">
        <el-step title="商家驳回" :icon="active>2?'el-icon-star-on':'el-icon-star-off'"/>
      </template>
    </el-steps>
    <el-button @click="act=1">回到第一步</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      act: 1
    }
  },
  computed: {
    active() {
      // 状态和步骤的关系, 根据状态确定步骤
      return this.act === 2 ? 3 : this.act
    }
  },
  methods: {
    step1() {
      // 审核的功能
      console.log('step1', arguments)
      this.act = 3 // 改变状态
    },
    step3() {
      // 发货的功能
      console.log('step2', arguments)
      this.act = 5
    }
  }
}
</script>
